<template>
  <div>
    <!-- 导航栏 -->
    <BScroll
      :scrollX="true"
      :scrollY="false"
      :probeType="3"
      :listenScroll="true"
      class="h_scroll"
      :class="{'flex':tabs.length<5?true:false}"
      ref="tabs"
    >
      <ul class="tabs" ref="tab_box">
        <li
          v-for="(item, index) in tabs"
          :key="index"
          ref="tab"
          @click.stop="ChangeView(index,item)"
          :class="{ active: activeIndex == index }"
        >
          {{ item }}
        </li>
        <li class="border_line" :style="{left:lineLeft + 'px'}" ref="border_line"></li>
      </ul>
    </BScroll>
  </div>
</template>

<script>
export default {
  props: {
    // 标签列表
    tabs: {
      type: Array,
      default() {
        return [];
      }
    },
    active:{
      type:[Number,String],
      default:0
    }
  },
  data() {
    return {
      distance: "", //标签底部随动条居中时,距离左侧的距离
      maxDistance: "", //标签横向滚动最大距离
      tabWidth: "", //一个tab标签的宽度
      tabsObj: {}, //获取的Bscroll对象，控制滚动
      activeIndex: 0 //选中的tab下标
    };
  },
  mounted() {
      this.$nextTick(()=>{
        this.init();
      })
  },
  computed:{
    //底部随动条相对tab左侧的距离
    lineLeft(){
        return this.tabWidth * this.activeIndex;
    },
    // 标签栏滚动的距离
    scrollLeft(){
        let s = this.lineLeft - this.distance;
        // 大于最大滚动距离返回最大滚动距离,若小于且大于0，返回滚动距离
        return s > this.maxDistance?this.maxDistance:s > 0 ? s : 0;
    }
  },
  methods: {
    // 初始化数据
    init() {
      this.getMax();
      this.getTabWidth();
      this.getDistance();
      this.initTabsObj();
    },
    // 初始化滚动对象
    initTabsObj(){
        this.tabsObj = this.$refs.tabs;
    },
    getDistance(){
        // 可视区的一半 - 标签的一半宽度
        this.distance = window.innerWidth/2 - (this.tabWidth)/2;
    },
    // 获取最大滚动距离
    getMax() {
      // 标签的实际宽度 - 设备可视区域的宽度 = 实际最大滚动的距离
      let s = this.$refs.tab_box.clientWidth - window.innerWidth
      this.maxDistance = s>0?s:0;
    },
    // 单个tab的宽度
    getTabWidth() {
      this.tabWidth = this.$refs.tab[0].clientWidth;
    },
    // 切换tab事件
    ChangeView(index,item) {
      this.activeIndex = index;
    },
    // 标签栏滚动
    scrollTab(){
        this.tabsObj.scrollTo(-this.scrollLeft,0,500,'ease');
    }
  },
  watch:{
    activeIndex(newval,oldval){
      this.$emit("change",newval);
      this.scrollTab();
    },
    active(newval,oldval){
      this.activeIndex = newval;
    }
  }
};
</script>

<style lang="less" scoped>
.flex{
  display: flex;
  align-items:center;
  justify-content: center;
}
.h_scroll {
  height: 100px;
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
  
  .tabs {
    display: inline-block;
    position: relative;
    li {
      display: inline-block;
      width: 20vw;
      height: 80px;
      box-sizing: border-box;
      line-height: 80px;
      text-align: center;
      font-size: 28px;
      box-sizing: border-box;
      border-bottom: 2px solid transparent;
      transition: all 0.3s;
    }
    li.active {
      color: rgb(255, 51, 0);
      font-size: 32px;
      font-weight: bold;
    }
    li.border_line {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 6px;
      width: 20vw;
      transition: all 0.3s;
      background-color: rgb(255, 51, 0);
    }
  }
}
</style>
